<template>
	<!--//App 拼装主页面-->
		<body class="main" >
		<!--通用头部组件-->
		<header>

			<!--logo及赛事管理系统-->
			<div class="top-info">
				<img src="../assets/GQ_logo.png" width="100" class="logo"/>
				<span class="management-system">赛事管理系统</span>
			</div>
			<!--End-->
			<!--当前页面显示的赛事信息-->
			<div class="page page-context">
				<!--当前选定的比赛城市区域-->
				<h1 class="page-title">{{mainData.matchYear}} {{mainData.leagueName}}</h1>
				<!--比赛赛制级别-->
				<span class="header-grading">{{mainData.matchLevel||'级别'}}</span>
				<span class=" header-decollator">|</span>
				<span class="header-gender">{{mainData.matchType||'类型'}}</span>
				<span class=" header-decollator">|</span>
				<span class="header-people_number">{{mainData.model||'人数'}}人制</span>
			</div>
			<!--End-->
			<!--导航及城市区域赛事选择-->
			<nav class="nav" >
				<!--主导航 start-->
				<li @click="navGo('EventOverview')" 
					:class="{'active':navActive=='EventOverview'}" 
					 class="nav-list ">
					<router-link to="/EventOverview"> 赛事概况</router-link>
				</li>
				<li @click="navGo('EventSchedule')" 
					:class="{'active':navActive=='EventSchedule'}" 
					 class="nav-list">
					<router-link to="/EventSchedule">赛事赛程</router-link>
				</li>
				<li @click="navGo('TeamPerformance')" 
					:class="{'active':navActive=='TeamPerformance'}"
					 class="nav-list">
					<router-link to="/TeamPerformance">球队表现</router-link>
				</li>
				<li @click="navGo('RankingList')" 
					:class="{'active':navActive=='RankingList'}"
					 class="nav-list">
					<router-link to="/RankingList">排行榜</router-link>
				</li>

				<!--end-->
				<!--侧边赛事搜索-->
				<div class="nav-competition">
					<!--切换赛事文字-->
					<span @click=" mtkDisplay = false " class="switch-competition-text">
						切换赛事( <span class="competiton_number">{{eventsNumber}}</span> )
					</span>
					<!--切换赛事按钮-->
					<span @click=" mtkDisplay = false " class="switch-competition-btn"></span>
					<!--赛事搜素 模态框-->
					<div id="search-MTk" @click.stop=" mtkDisplay=true " :class="{'disNone':mtkDisplay}" class="search-MTk active">
							
								
					</div>
					<!--搜索模块-->
					<events-search class="events-search"
						:class="{'disNone':mtkDisplay}"
						:Mtk="mtkDisplay"
						@ch-events-number='changeEventsNumber'
						@ch-comId="changeCompetitionId"
						@ch-mainData="changeMainData"
						@ch-mtk="changeMtkDisplay">
					</events-search>	
					<!--end-->
				</div>
				<!--end-->
				
				

			</nav>
			<!--End-->
		</header>
		<!--根据导航路由信息展示不同页面-->
		<div class="content-view" v-if="routerRander">
			<keep-alive :key="competitionId">
				<router-view 
					@ch-nav-active="changeNavActive" 
					@ch-eventId="changeEventId"
					@ch-teamId="changeTeamId"
					@ch-playerid="changePlayerId"
					:navActive="navActive"
					:comId="competitionId"
					:eventid="eventId"
					:teamId="teamId"
					:playerId="playerId"
					:comTitle="competitionTitle"
					:comImage="competitionImage"
					
					>
				</router-view>
			</keep-alive>	
		</div>
		<!--通用底部组件-->
		<footer>
			<div class="footer-info">
				<div class="cooperation-unit">
					
					<ul>
						<h3>合作单位</h3>
						<li v-if="supportUnit" v-for="item in supportUnit ">{{item}}</li>
			
					</ul>
				</div>
				<div class="contact">
					
					<ul>
						<h3>联系方式</h3>
						<li>电话：027-546246634</li>
						<li>地址：湖北省武汉市东湖高新区华工科技园234号</li>
						<li>公众号：HuiDong421456（扫码见右图）</li>
					</ul>
					<img class="main-Qr-code" width="80" height="80" src="../assets/Qr.png"/>
				</div>
				<p class="company">@鄂审 · 第424278【汇动智能科技股份有限公司】</p>		
			</div>
			<div class="footer-show"></div>
		</footer>
		
		

	
	
	</body>
		
</template>

<script>

//	import eventsSearch from '@/components/eventsSearch'
	
	
	export default{
		name:'MainPage',
		data(){
			return {
				routerRander:false,//控制路由视图的延迟异步加载
				mainData:{},
				supportUnit:[],
				navActive:'EventOverview',
				mtkDisplay:true,
				competitionId:'',
				eventId:'',
				teamId:'',
				playerId:'',
				eventsNumber:0,
				dataUrl:'http://101.37.33.145:3100/weixin/findLeaguesBasic.do'
				
			}
		},
		components:{
			eventsSearch:function(resolve) {
				//按需加载搜索模块
             	require(['@/components/eventsSearch.vue'], resolve);
			}
			
				
		},
		computed:{
			competitionImage:function () {
					return this.mainData.adImage
			},
			competitionTitle:function () {
					return this.mainData.leagueDescribe
			}
		},
	
		mounted:function(){
			this.navActive=sessionStorage.navActive;
			setTimeout(()=>this.routerRander=true,0);
//			this.$axios.defaults.headers.post['Content-Type']='application/x-wwuw-form-urlencoded';
			this.getMainData();
		},
		updated:function(){
			this.navActive=sessionStorage.navActive;
		},
		
		methods:{
			navGo(str){
				sessionStorage.navActive=str;
			},
			split(item){
				return item.split(';')
			},
			getMainData(){
				this.$axios.post(
					this.dataUrl,
					{
						city:'',
						province:'',
						leagueName:''
					}
				).then(
					res=>{
						this.mainData = res.data[0];
						this.supportUnit=this.mainData.supportUnit.split('\uff1b'); // \uff1b 是中文分号(;)的unicode码;在这里等于是用中文分号进行切割
					}
				).catch(
					err=>console.log(err.message)
				)	
			},
			
			changeNavActive(str){
				this.navActive=str;
			},
			changeMainData(data){
				this.mainData=data;
				this.supportUnit=this.mainData.supportUnit.split('\uff1b');
			},
			changeCompetitionId(id){
				this.competitionId=id
			},
			changeTeamId(id){
				this.timeId=id
			},
			changePlayerId(id){
				this.playerId=id
			},
			changeEventId(id){
				this.eventId=id
			},
			changeMtkDisplay(status){
				this.mtkDisplay=status
			},
			changeEventsNumber(num){
				this.eventsNumber=num
			}
			
		}
	}
</script>

<style scoped="scoped">
	[v-clock]{display: none;}
	body,html{
				padding: 0px;
				margin: 0px auto;
				width: 1366px;
				height: 1000px;
				font-family: "微软雅黑";
			}
		
			
			ul,li,ol,h1,h2,h3,h4,h5,span{
				list-style: none;
				padding: 0px;
				margin: 0px;
				border: none;
				outline: none;
			}
			input{
				outline: none;
				border: none;
			}
			a{
				text-decoration: none;		
				color: inherit;
				border: none;
				outline: none;					
			}
			header{
				width: 1366px;
				margin: 0px auto;
				
			}
			/*顶部横条 包含logo 和 管理系统入口*/
			.top-info{
				box-sizing: border-box;
				width:100%;
				height:45px ;
				padding: 0px 90px;
				overflow: hidden;
				color:white ;
				background-color:#009e86;	
			}
			.logo{
				margin-top:6px ;
				transform: scale(1.3);
			}
			/*后台管理系统*/
			.management-system{
				
				float: right;
				text-align: center;
				line-height: 45px;
				font-size:14px ;
				color: #f2f2f2 ;
				
			}
			/*页面内容信息加载主体*/
			.page-context{
				box-sizing: border-box;
				width:1366px;
				height: 180px;
				text-align: center;
				background-color: #00b096;
				overflow: hidden;
				color: white;
				
			}
			/*比赛 当前区域 页面标题*/
			.page-title{
				margin-bottom: 18px;
				margin-top: 40px;
				font-size:36px ;
				font-weight: 400;
			}
			/*比赛学年级别,性别,人数*/
			.header-grading,.header-gender,.header-people_number{
				padding-left: 34px;
				padding-top:2px ;
				padding-bottom:10px ;
				font-size: 16px;
			}
			/*级别*/
			.header-grading{
				background: url(../assets/school.png) 0px -2px no-repeat ;
				background-size: 25px;
				
			}
			/*性别*/
			.header-gender{
				background: url(../assets/sex.png) 0px 0px no-repeat ;
				background-size: 24px;
				
			}
			/*人数*/
			.header-people_number{
				background: url(../assets/comps.png) 0px 0px no-repeat ;
				background-size: 22px;
			}
			/*组别性别人数信息分隔符*/
			.header-decollator{
				display: inline-block;
				width: 3px;
				height: auto;
				margin: 0px 18px;
				margin-bottom: 10px;
				font-family: "黑体";
				color: whitesmoke;
				font-size: .7em;
				font-weight: 100;
				text-shadow: 1.2px 0px 1px   black;
			
			}
			/*主导航盒子*/
			.nav{
				box-sizing: border-box;
				width: 100%;
				height: auto;
				padding: 0px 90px;
				padding-left:95px;
				font-size: 18px;
				overflow: hidden;
				background-color:#07252e ;
			}
			/*导航选项*/
			.nav-list{
				float:left ;
				width:185px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				color: #f2f2f2;
				margin-right: 15px;
				background-color: #07252e;
				transform: skewX(-17deg) ;
				-webkit-transform: skewX(-17deg) translateX(0);
			}
			.nav-list>a{
				display: block;
				transform: skewX(17deg) ;
				-webkit-transform: skewX(17deg) translateX(0);
			}
			/*顺序不能乱 start*/
			.nav-list:hover{
				color: white;
				background-color: #000000;
			}
			/*此.active 非:active*/
			.nav-list.active{
				color: white;
				background-color: #ff7211;
			}
			/*顺序不能乱 End*/
			/* 切换赛事文本 box*/
			.nav-competition{
				float: right;				
			}
			.switch-competition-text{
				display: inline-block;
				width:130px ;
				height: 50px;
				line-height: 50px;
				font-size: 16px;
				text-align: center;
				vertical-align: middle;
				color: white;
				background-color: #FF7211;
			}
			.switch-competition-btn{
				position: relative;
				float: right;
				width: 50px;
				height: 50px;
				line-height: 36px;
				background-color: #E65B00;
			}
			.switch-competition-btn:hover{
				background-color: #C44F00;
			}
			.switch-competition-btn>a{
				display: inline-block;
				width: 100%;
				height: 100%;
			}
			.switch-competition-btn::after{
				content:'';
				position: absolute;
				top:calc(50% - 1.5px);
				left: calc(50% - 15px);
				width: 30px;
				height: 3px;
				background-color: white;
				box-shadow: 0px 8px white,0px -8px white;
			}
			/*模态框*/
			.search-MTk{
				
				position: fixed;
				z-index: 100;
				left: 0px;
				top: 0px;
				width: 100%;
				height: 100%;
				background-color: #07252E;
				opacity: .7;
			}
			.events-search{
				position: fixed;
				z-index: 101;
				top: 0;
				right: 0;
				width: 22%;
				height:100% ;
				padding: 30px;
				background-color: darkseagreen;

			}
			.disNone{
				display:none;
			}
			
			/*导航路由视图*/
			.content-view{
				box-sizing: border-box;
				width:1366px;
				height: auto;
				padding: 0px 90px;
				margin: 30px auto;

			}
			
			
			
			/*路由视图框架*/
			
			footer{
				width:1366px;
				margin: 0px auto;
				
			}
			footer li{
				color: #B8BABB;
				margin-top:20px;
			}
			.footer-info{
				box-sizing: border-box;
				color: white;
				width: 100%;
				height: auto;
				padding:30px 80px ;
				overflow: hidden;
				background-color: #04161E;
				border-top: 6px solid #FA3400;
			}
			
			.cooperation-unit,.contact{
				position: relative;
				float: left;
				width: 50%;
				margin-bottom: 30px;
				text-align: left;
			}
			.cooperation-unit li{
				float:left;
				width: 50%;
				text-align: left;
			}
			.main-Qr-code{
				position: absolute;
				top:60px;
				right:120px ;
			}
			.company{
				width: 100%;
				margin: 0px auto;
				color: #6C7478;
				text-align: center;
			}
			html,body{
				transform: scale();
			}
			
</style>